<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./idb.js"></script>
</head>
<body>
    <style>
  svg {
    position: absolute;
  }

  rect {
    /* animation: dash 5000s linear infinite backwards; */
  }

  @keyframes dash {
    to {
      stroke-dashoffset: -200000;
    }
  }
    </style>
    <svg width="200" height="200">
        <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#4aa485" />
          <stop offset="100%" stop-color="#6bd696" />
        </linearGradient>
        <rect width="90%" height="90%" stroke-width="8" x="4" y="4" fill="none" stroke="url(#linear)"
          stroke-dasharray="0,20" stroke-linecap="round"></rect>
      </svg>

    <script>
        let idb=new IDB('idbtest',{
            store:{
                // option:{
                //     keyPath: 'id',
                //     autoIncrement: true
                // },
                indexs:[
                    ['type'],
                    ['href'],
                    ['desc'],
                    ['size']
                ]
            }
        })
        // idb.add([
        //     {type:'error',href:'caixin.com',desc:'404',size:4},
        //     {type:'error',href:'m.caixin.com',desc:'undefind',size:6},
        //     {type:'error',href:'caixin.com',desc:'404',size:3},
        //     {type:'error',href:'m.caixin.com',desc:'undefind',size:5},
        //     {type:'error',href:'caixin.com',desc:'404',size:7},
        //     {type:'error',href:'m.caixin.com',desc:'undefind',size:1},
        // ])
        // idb.searchAll().then(console.log)

        function foo(cb){
            obj.load()

            

            obj.onload=function(res){
                //....
                cb && cb(obj)
            }


        }

        
        
        const gen=foo()
        const res1=gen.next() //obj.load()
        const res2=gen.next() //obj.load()
        const res3=gen.next() //obj.load()
        //或者
        gen.next().then()
    </script>
</body>
</html>